<template>
	<div class="front_index_container">
		<el-row :gutter="12" class="index_handler">
			<el-col :xs="24" :sm="12" :md="6">
				<div class="item">
					<h4>第一步：课题申请</h4>
					<el-link icon="el-icon-plus" href="/#/front/topic/form">新增课题</el-link>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="6">
				<div class="item">
					<h4>第二步：实验申请</h4>
					<el-link icon="el-icon-plus" href="/#/front/experiment/form">新增实验</el-link>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="6">
				<div class="item">
					<h4>第三步：实验反馈</h4>
					<el-link icon="el-icon-edit" href="/#/front/topic/form">填写反馈</el-link>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="6">
				<div class="item">
					<h4>第四步：成果提交</h4>
					<el-link icon="el-icon-plus" href="/#/front/achievement/form">新增成果</el-link>
				</div>
			</el-col>
		</el-row>
		<my-topic></my-topic>
		<my-experiment></my-experiment>
		<my-achievement></my-achievement>
		<el-row :gutter="12" type="flex">
			<el-col :xs="24" :sm="24" :md="12">
				<card-content title="常见问题" to="/front/question">
					<div class="front_index_question">
						<dl v-for="(item, index) in questionList" :key="index">
							<dt>
								<el-link :href="`/#/front/question/${item.id}`">{{ item.ask }}</el-link>
							</dt>
							<dd>{{ $cleanHtmlTag(item.answer) }}</dd>
						</dl>
					</div>
				</card-content>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12">
				<card-content title="联系方式">
					<div class="front_index_contact">
						<dl v-for="(item, index) in contactList" :key="index">
							<dt>{{ item.name }}</dt>
							<dd>
								<span>{{ item.filed13 }}</span>
								<span>{{ item.filed14 }}</span>
								<span>{{ item.filed15 }}</span>
							</dd>
						</dl>
					</div>
				</card-content>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import myTopic from './myTopic';
import { mapGetters } from 'vuex';
import myExperiment from './myExperiment';
import myAchievement from './myAchievement';
import cardContent from '../common/cardContent';
import { getTbQaList } from '@/api/system/tbQa';
import { queryJournalismList } from '@/api/system/tbSysJournalism';
export default {
	components: {
		cardContent,
		myTopic,
		myExperiment,
		myAchievement
	},
	data() {
		return {
			contactList: [],
			questionList: []
		};
	},
	computed: {
		...mapGetters(['siteConfig'])
	},
	mounted() {
		this.getContactData();
		this.getQuestionData();
	},
	methods: {
		//获取常用问题
		async getQuestionData() {
			let params = {
				page: 1,
				limit: 4
			};
			let result = await getTbQaList(params).then((res) => res.data);
			if (result.code === '0') {
				this.questionList = result.data || [];
			}
		},
		//获取联系方式
		async getContactData() {
			this.contactList = this.siteConfig.filter((n) => n.type === '4');
		}
	}
};
</script>

<style lang="scss" scoped>
.front_index_container {
	max-width: max(1200px, 75%);
	box-sizing: border-box;
	margin: 0 auto 12px;
	width: 100%;

	.el-row {
		flex-wrap: wrap;
	}

	.el-col {
		margin-top: 12px;
	}
}

.front_index_contact,
.front_index_question {
	padding: 8px;

	dl {
		padding: 8px;
	}

	dt {
		display: flex;
		align-items: flex-start;
		font-size: 15px;
		line-height: 20px;
		font-weight: bold;
	}

	dd {
		line-height: 1;
		color: #909399;
		font-size: 14px;
	}
}

.front_index_contact dd {
	display: flex;
	flex-wrap: wrap;
	margin-top: 5px;

	span {
		white-space: nowrap;
		margin-right: 30px;
		line-height: 1;
		padding: 5px 0;
	}
}

.front_index_question {
	dt {
		&:before {
			content: 'Q：';
		}

		.el-link {
			font-size: 15px;
			font-weight: bold;
		}
	}

	dd {
		overflow: hidden;
		margin-top: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;

		&:before {
			content: 'A：';
		}
	}
}

.index_handler .item {
	border: solid 1px #ebeef5;
	background-color: #fff;
	border-radius: 6px;
	position: relative;
	padding-top: 50%;

	h4,
	.el-link {
		position: absolute;
		transform: translateX(-50%);
		white-space: nowrap;
		left: 50%;
	}

	h4 {
		bottom: calc(50% + 10px);
		font-size: 20px;
		line-height: 1;
	}

	.el-link {
		top: calc(50% + 10px);
		font-size: 18px;
	}
}

@media screen and (max-width: 992px) {
	.front_index_container {
		padding: 0 12px;
	}
}
</style>
